<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <style>
        #model{
            height:200px;
            width: 200px;
            line-height: 200px;
            position: fixed;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            border:1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <button id="open">打开弹框</button>
    <button id="close">关闭弹框</button>
    <script>
        // model类 可以实例化很多次，有一种类只实例化一次--单例模式
        // 推迟 model 的实例化的时间，到第一次显示 
        // 单例模式构建Model类
            // 1. 立即执行函数 + 返回函数
                // 函数嵌套函数 闭包
            // 2. return  如果在构造函数中手动指定return，new的高级用法
                // 满足单例
        const Model = (function() {
            let model=null;   // 模态框
            return function() {
                if(!model){ // model为空 第一次new
                    model = document.createElement('div');
                    model.id='model';
                    model.style.display='none';
                    model.innerText = '我是一个全局唯一的模态框';
                    document.body.appendChild(model);
                }
                return model;
            }
        })();
        // const Model = function() {
        //     // dom -> body
        //     this.modelBox = document.createElement('div');
        //     this.modelBox.id='model';
        //     this.modelBox.style.display='none';
        //     this.modelBox.innerText = '我是一个全局唯一的模态框';
        //     document.body.appendChild(this.modelBox);
        // }
        // let model = new Model();  // 直接实例化 Model

        // 下面代码
        // 无论点不点按钮，触发登陆相关的权限与否，model 框都已经挂载到页面上了
        // model框不是要提前存在的，这种方式是不好的
        // model框是在 第一次触发按钮时 生产+显示  2..n次触发时只显示
        // let model = document.createElement('div');
        // model.id='model';
        // model.style.display='none';
        // model.innerText = '我是一个全局唯一的模态框';
        // document.body.appendChild(model);

        // open close都会去做实例化
        // 单例模式的概念是无论是实例化多少次返回的仍是原来的唯一的实例
        const openButton = document.getElementById('open'),
            closeButton = document.getElementById('close');

        openButton.addEventListener('click',function(){
            // 弹出框显示出来
            let model = new Model(); 
            // model.modelBox.style.display='block';
            model.style.display='block';
            
        });
        closeButton.addEventListener('click',function(){
            // 已经存在的弹出框隐藏
            let model = new Model(); 
            // model.modelBox.style.display='none';
            model.style.display='none';
        });
    </script>
</body>
</html>